<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>avatarify-webrtc demo</title>
    <style>
        button {
            padding: 8px 16px;
            margin-left: 100px;
            width: 120px;
            height: 30px;
        }

        pre {
            overflow-x: hidden;
            overflow-y: auto;
        }

        video {
            width: 45%;
            margin: 5px;
        }

        .option {
            margin-bottom: 8px;
        }

        #media {
            max-width: 1280px;
        }

        #wrap {
            display: flex;
        }

        select {
            width: 200px;
            height: 30px;
        }

        img {
            width: 60px;
            height: 60px;
            margin-left: 4px;
            margin-right: 4px;
            margin-top: 4px;
            margin-bottom: 4px;
            cursor: pointer;
        }

        p {
            display: block;
            margin-top: 4px;
            margin-bottom: 8px;
        }

        label {
            margin-left: 10px;
        }
    </style>
</head>

<body>
    <h3>avatarify-webrtc demo [微信中需要转到手机浏览器中打开]</h3>
     <p>
        &nbsp;&nbsp;
        <a href="https://gitclone.com/aiit/meeting" target="_blank">Meeting with Avatar</a>
        &nbsp;&nbsp;
        <a href="https://aiit.gitclone.com" target="_blank">Download App</a>
        &nbsp;&nbsp;
        <a href="https://github.com/git-cloner/avatarify-webrtc" target="_blank">Source code on Github</a>
    </p>
    <div class="option">
        <label for="video-resolution">&nbsp;&nbsp;&nbsp;分辨率:</label>
        <select id="video-resolution">
            <option value="" selected>Default resolution</option>
            <option value="320x240">320x240</option>
            <option value="640x480">640x480</option>
            <option value="960x540">960x540</option>
            <option value="1280x720">1280x720</option>
        </select>
        <p>
        <label for="video-codec">视频编码:</label>
        <select id="video-codec">
            <option value="default" selected>Default codecs</option>
            <option value="VP8/90000">VP8</option>
            <option value="H264/90000">H264</option>
        </select>
        <p>
            <label for="avatar">&nbsp;&nbsp;&nbsp;avatar:</label>
            <select id="avatar">
                <option value="1" selected>1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
            </select>
            <p>
            <label for="avatar_type">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;类型:</label>
            <input type="radio" id="avatar_type0" name="avatar_type" checked value="0"><label
                for="avatar_type0">人脸替换</label>
            <input type="radio" id="avatar_type1" name="avatar_type" value="1"><label for="avatar_type1">表情跟随(10s delay)</label>
        <div id="wrap">
            <div class="box"><img src="./avatars/1.png" onclick="onAvatarClick(1)" /></div>
            <div class="box"><img src="./avatars/2.png" onclick="onAvatarClick(2)" /></div>
            <div class="box"><img src="./avatars/3.png" onclick="onAvatarClick(3)" /></div>
            <div class="box"><img src="./avatars/4.png" onclick="onAvatarClick(4)" /></div>
            <div class="box"><img src="./avatars/5.png" onclick="onAvatarClick(5)" /></div>
        </div>
        <div id="wrap">
            <div class="box"><img src="./avatars/6.png" onclick="onAvatarClick(6)" /></div>
            <div class="box"><img src="./avatars/7.png" onclick="onAvatarClick(7)" /></div>
            <div class="box"><img src="./avatars/8.png" onclick="onAvatarClick(8)" /></div>
            <div class="box"><img src="./avatars/9.png" onclick="onAvatarClick(9)" /></div>
        </div>

    </div>

    <button id="start" onclick="start()">Start</button>
    <button id="stop" style="display: none" onclick="stop()">Stop</button>
    <h3>Media</h3>
    <div id="media" style="display: none">
        <div id="wrap">
            <video id="video_local" autoplay="true" playsinline="true"></video>
            <video id="video" autoplay="true" playsinline="true"></video>
        </div>
    </div>
    <h3>State</h3>
    <p>
        &nbsp;&nbsp;ICE gathering state: <span id="ice-gathering-state"></span>
    </p>
    <p>
        ICE connection state: <span id="ice-connection-state"></span>
    </p>
    <p>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Signaling state: <span id="signaling-state"></span>
    </p>
    <!--
    <h3>Offer</h3>
    <pre id="offer-sdp"></pre>

    <h3>Answer</h3>
    <pre id="answer-sdp"></pre>-->
    <script src="client.js"></script>
</body>

</html>